<style>
    .layui-form-label {
        float: left;
        display: block;
        padding: 9px 15px;
        width: 120px;
        font-weight: 400;
        line-height: 20px;
        text-align: right
    }

    .layui-input-block {
        margin-left: 150px;
        min-height: 36px
    }
    .layui-form-item{
    margin-bottom:5px !important;}
</style>
<!-- user表单弹窗 -->
<form id="form" lay-filter="form" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">产品名称</label>
            <div class="layui-input-block">
                <input name="productName" placeholder="请输入产品名称" type="text"
                       class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">上传图片</label>
            <div class="layui-input-block">
                <!-- <input id="pictureFile" type="text" name="pictureFile" class="layui-hide"/> -->
                <div class="layui-upload-list">
                    <input id="productPic" name="productPic" class="layui-hide"/>
                    <img class="layui-upload-img" id="demo1"
                         style="width: 150px; height: 100px; border-color: #D2D2D2 !important;">
                    <button type="button" class="layui-btn" id="test1"
                            style="margin-right: 25px;">选择
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">招商采购价格</label>
            <div class="layui-input-block">
                <input name="productPrice" placeholder="请输入价格" type="text"
                       class="layui-input" lay-verify="required|number|positiveNumber" required/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">门店采购价格</label>
            <div class="layui-input-block">
                <input name="zsPrice" placeholder="请输入价格" type="text"
                       class="layui-input" lay-verify="required|number|positiveNumber" required/>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">产品规格</label>
            <div class="layui-input-block">
                <input name="placeOrigin" placeholder="请输入产品产地" type="text"
                       class="layui-input" maxlength="50" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">起购数量</label>
            <div class="layui-input-block">
                <input name="purchaseNum" placeholder="请输入起购数量" type="text"
                       class="layui-input" maxlength="50" lay-verify="required|number|positiveInteger" required/>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">产品特点</label>
        <div class="layui-input-block">
			<textarea name="characteristic" placeholder="请输入产品特点"
                      class="layui-textarea" maxlength="50" lay-verify="required"
                      required></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">产品功效</label>
        <div class="layui-input-block">
			<textarea name="effect" placeholder="请输入产品功效" class="layui-textarea"
                      maxlength="50" lay-verify="required" required></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">零售状态</label>
            <div class="layui-input-block">
                <input type="radio" name="isSale" value="1" title="是" checked/>
                <input type="radio" name="isSale" value="0" title="否"/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">上架状态</label>
            <div class="layui-input-block">
                <input type="radio" name="saleStatus" value="1" title="上架" checked/>
                <input type="radio" name="saleStatus" value="0" title="下架"/>
            </div>
        </div>
        <!--<div class="layui-inline">-->
            <!--<label class="layui-form-label">首页展示</label>-->
            <!--<div class="layui-input-block">-->
                <!--<input type="radio" name="homeShow" value="1" title="展示" checked/>-->
                <!--<input type="radio" name="homeShow" value="0" title="隐藏"/>-->
            <!--</div>-->
        <!--</div>-->
    </div>

    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary" type="button"
                ew-event="closeDialog">取消
        </button>
        <button class="layui-btn" lay-filter="form-submit" lay-submit>保存</button>
    </div>
</form>
<script>
    layui.use(['layer', 'admin', 'form', 'formSelects', 'upload'],
        function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var admin = layui.admin;
            var form = layui.form;
            var upload = layui.upload;
            var formSelects = layui.formSelects;
            var formData = new FormData();

            form.render('radio');

            var url = 'service/product/add';
            // 回显user数据
            var product = admin.getTempData('t_product');
            if (product) {
                $('input[name="id"]').attr('readonly',
                    'readonly');
                url = 'service/product/update';

                $("input[name=saleStatus][value=0]").attr("checked", product.saleStatus == 0 ? true : false);
                $("input[name=saleStatus][value=1]").attr("checked", product.saleStatus == 1 ? true : false);
                $("input[name=homeShow][value=0]").attr("checked", product.homeShow == 0 ? true : false);
                $("input[name=homeShow][value=1]").attr("checked", product.homeShow == 1 ? true : false);


                $("input[name=productPic]").val(product.productPic);
                $(".layui-upload-img").attr("src", product.productPic);

                form.val('form', product);
            }

            //要放在form.on外面，千万不能放在提交步骤中，否则会不触发
            form.verify({
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                positiveNumber: [
                    /^[1-9]\d*$|^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/
                    , '请填入大于零的数'
                ]
                , positiveInteger: [
                    /^[1-9]\d*$/
                    , '请填入大于零的整数'
                ]
            });

            // 表单提交事件
            form.on('submit(form-submit)', function (data) {
                layer.load(2);
                admin.req(url, data.field, function (data) {
                    layer.closeAll('loading');
                    if (data.code == 1) {
                        layer.msg(data.msg, {
                            icon: 1
                        });
                        admin.finishPopupCenter();
                    } else {
                        layer.msg(data.msg, {
                            icon: 2
                        });
                    }
                }, "post");
                return false;
            });
            var demoUrl = $('#demo1')[0].src;
            console.info(demoUrl);
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1',
                url: 'service/product/upload/',
                type: 'images',
                accept: 'images',
                size: 1024*10 ,//限定大小
                choose: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file,
                                          result) {
                        $('#demo1').attr("src", result);//图片链接（base64）

                    });
                }
                , done: function (data) {
                    if (data.code == 1) {
                        $("#productPic").val(data.data);
                    } else {
                        layer.msg(data["msg"], {
                            icon: 2
                        });
                        $('#demo1').attr("src", demoUrl);
                    }
                }
                , error: function () {
                    layer.msg('图片上传失败', {
                         icon: 2
                     });
                    $('#demo1').attr("src", "");
                }

            });
        });
</script>